<template>
	<view class="container">
		<view class="topSec flex flex-direction justify-center text-center">
			<view class="">
				<view class="gicobox d_ib text-acenter">
					<text class="cuIcon-roundcheckfill d_ib"></text>
				</view>
			</view>
			<view class="text-xll text-bold padding-top-sm">
				兑换成功
			</view>
		</view>
		<view class="text-xl padding-left padding-top-sm padding-bottom-sm">
			我的优惠券
		</view>
		<scroll-view scroll-y="true" class="listbox">
			<view class="padding-lr padding-top-xs padding-bottom-xs">
				<!-- :class="{act:sClass==index}" -->
				<view v-for="(item,index) in 5" :key="index" class="clistItem flex p_rlt margin-bottom-sm" @click="sClass=index">
					<view class="uglbox">
						<text class="cuIcon-check text-bold p_rlt"></text>
					</view>
					<view class="cleft text-norange  flex flex-direction justify-center text-center">
						<view class="">
							<text class="text-bold clnum">200</text>
							<text class="">元</text>
						</view>
						<view class="text-sm">
							项目券
						</view>
					</view>
					<view class="bcent flex-sub p_rlt padding-left padding-bottom-sm">
						<view class="text-bold padding-top">
							[店长推荐]指透培阳90分钟
						</view>
						<view class="crcenter flex align-center padding-right">
							<view class="flex-sub text-sm text-c9">
								2022.10.19
							</view>
							
						</view>
						<view class="cguize text-c6 p_rlt text-sm" :class="{show:showDetail}">
							<view class="flex-sub">
								使用范围：颐而康精选商城、小颐有约
							</view>
							<!-- cuIcon-fold -->
							<view class="cgmore text-c3 text-center text-sm" @click.stop="tapShowMore()">
								<view class="">
									更多
									<!-- <text class="text-ngreen" :class="[showDetail?'cuIcon-fold':'cuIcon-unfold']"></text> -->
								</view>
								<view class="text-ngreen">
									<text :class="[showDetail?'cuIcon-fold':'cuIcon-unfold']"></text>
								</view>
							</view>
						</view>
					</view>
					<view class="bright flex flex-direction justify-center align-center leftDashed p_rlt">
						<view class="cactBtn text-ngreen text-center">
							选择
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- okgray -->
		<view class="ok_submit"><view class="full_submit_btn" @click="mnavTo('/pages/order/creatOrder/creatOrder')">去安排技师房间</view></view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	// import { onShow } from '@dcloudio/uni-app';
	import { mnavTo } from '@/utils/helper';
	const showDetail=ref(false)
	const	sClass=ref(0)
	const tapShowMore=()=>{
		showDetail.value=!showDetail.value
	}
</script>

<style lang="scss">
.topSec{
	height: 30vh;
	.gicobox{
		width: 180rpx;
		height: 180rpx;
		line-height: 1;
		border-radius: 50%;
		background: #E8F7EE;
		color: #4AD39B;
		font-size: 140rpx;
	}
}
.listbox{
	width: 100%;
	height: 52vh;
}
.clistItem{
	width: 100%;
	min-height: 234rpx;
	background: #FFF;
	// box-shadow: 0px 2px 18rpx rgba(0, 0, 0, 0.1);
	box-shadow: 0px 2px 18rpx rgba(0, 0, 0, 0.08);
	border-radius: 16rpx;
	overflow: hidden;
	// &:nth-last-child(1){
	// 	margin-bottom: 0;
	// }
	&.act{
		box-shadow: 0px 2px 18rpx #56BF7A;
		// border: 1px solid #56BF7A;
		.uglbox{
			color: #fff;
			&:before{
				background: #56BF7A;
			}
		}
	}
	.cleft{
		width: 212rpx;
		// height: 100%;
	}
	.clnum{
		font-size: 60rpx;
	}
	.crcenter{
		width: 100%;
		height: 40rpx;
	}
	.cactBtn{
		width: 142rpx;
		height: 68rpx;
		line-height: 69rpx;
		background: #E4F8E4;
		border-radius: 68rpx;
	}
	&.gry{
		.cactBtn{
			background: #D0CFCF;
			color: #fff;
		}
	}
	
}
.cguize{
	display: flex!important;
	margin-top: 16rpx;
	height: 62rpx;
	// padding-right: 62rpx;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	&.show{
		height: auto;
		overflow:initial;
		text-overflow:initial;
		display:block;
		-webkit-box-orient:initial;
		-webkit-line-clamp:initial;
	}
}
.cgmore{
	width: 60rpx;
	height: 100%;//62
	// position: absolute;
	// right: 0;
	// bottom: 0;
	// z-index: 3;
	cursor: pointer;
}
.bcent{
	min-height: 100%;
	&:before,&:after{
		content: '';
		position: absolute;
		right: -10rpx;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #E4E4E4;
	}
	&:before{
		top: -10rpx;
	}
	&:after{
		bottom: -10rpx;
	}
}
.bright{
	min-height: 100%;
	width: 212rpx;
}
.leftDashed {
	position: relative;
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 100%;
		background-image: linear-gradient(to bottom, #E4E4E4 0%, #E4E4E4 52%, transparent 50%);
		background-size: 1rpx 16rpx;
		background-repeat: repeat-y;
	}
}
.ok_submit {
	position: fixed;
	width: calc(100% - 50rpx);
	left: 25rpx;
	bottom: 40rpx;
}
.uglbox{
	position: absolute;
	left: 4rpx;
	top: 4rpx;
	width: 46rpx;
	height: 44rpx;
	font-size: 22rpx;
	overflow: hidden;
	color: #fff;
	z-index: 1;
	border-radius: 17rpx;
	.cuIcon-check{
		margin-right: 16rpx;
		z-index: 3;
	}
	&:before{
		content: '';
		position: absolute;
		left:-28rpx;
		top: -28rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(230, 230, 230, 0.5);
		z-index: 1;
	}
	
}
</style>